<template>
    <div class="public-common">
        <!--公司动态-->
        <div class="public-title">公司动态列表</div>
        <div class="public-searchbox">
            <el-row>
                <el-col :span="6">
                    <el-input placeholder="请输入内容" v-model="queryParam.title" class="input-with-select"  size="mini" />
                </el-col>
                <el-col :span="18">
                    <el-button type="primary" icon="el-icon-search" size="mini"  style="margin-left:10px;" @click="search()">搜索</el-button>
                    <el-button type="success" size="mini"  icon="el-icon-edit-outline" @click="dialog.isVisible=true">新建</el-button>
                    <el-button type="danger" size="mini"  icon="el-icon-delete">删除</el-button>
                </el-col>
            </el-row>
        </div>
        <el-scrollbar class="public-scroll">
        <el-table :data="tableData" size="mini" border stripe header-row-class-name="textcenter">
            <el-table-column
                label="标题" >
                <template slot-scope="scope">
                    {{scope.row.fileName}}
                </template>
            </el-table-column>
            <el-table-column
                label="创建人">
                <template slot-scope="scope">
                    {{scope.row.publisher}}
                </template>
            </el-table-column>                
            <el-table-column
                label="创建日期">
                <template slot-scope="scope">
                    {{scope.row.publishDate | dateFormat('yyyy-MM-dd')}}
                </template>
            </el-table-column> 
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="view(scope.row)">查看</el-button>
                    <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>        	
        </el-table>
        </el-scrollbar>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.now"
        :page-sizes="page.sizes"
        :page-size="page.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total" style="margin-top:10px;">
        </el-pagination>
        <!--添加-->
        <el-dialog :title="viewDialog.title" :visible.sync="viewDialog.isVisible" width="70%">
            <el-scrollbar style="height:350px;">
                <el-form-item label="标题:">
                    <p>"viewDialog.fileName"></p>
                </el-form-item>
                <el-form-item label="内容:">
                    <div style="padding:20px;" id="fileContent"></div>
                </el-form-item>
            </el-scrollbar>
        </el-dialog>
        <el-dialog :title="dialog.title" :visible.sync="dialog.isVisible" width="70%">
            <el-scrollbar style="height:350px;">
            <el-row>
                <el-col :span="15">
                    <el-form ref="editForm" :model="editForm" label-width="100px">
                        <el-form-item label="创建人:">
                            <el-input v-model="editForm.publisher" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="创建时间:">
                            <el-date-picker
                            v-model="editForm.publishDate"
                            type="datetime"
                            format="yyyy/MM/dd"
                            value-format="yyyy/MM/dd"
                            placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="时效性:">
                            <el-input v-model="editForm.timelen" style="width:49%"></el-input>
                            <el-select v-model="editForm.timetype" placeholder="请选择" style="width:40%;">
                                <el-option
                                v-for="item in select.timeType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value" >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="标题:">
                            <el-input v-model="editForm.fileName"></el-input>
                        </el-form-item>
                        <el-form-item label="内容:">
                            (允许最大长度10000个字)
                        </el-form-item>
                        <!-- //编辑器 -->
                        <tinymce
                            ref="editor"
                            :tinymceObj="dialog.tinymceObj"
                            v-model="editForm.creatcontent"
                            />
                           
                    </el-form>
                </el-col>
                <el-col :span="8" :offset="1">
                    <h3 style="line-height:30px;">部门列表</h3>
                    <el-scrollbar style="height:400px;padding-left:10px;">
                        <Menus :treeview="dialog.treeview" @choosetree="choosetree"></Menus>
                    </el-scrollbar>
                    
                </el-col>
                
            </el-row>
            </el-scrollbar>
            <div style="text-align:center;padding-top:10px;">
                <el-button type="primary" size="mini" @click="submitForm('editForm')">确定</el-button>
                <el-button type="info" @click="dialog.isVisible = false" size="mini">返回</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import tinymce from '@/components/Editor'
import Menus from "@/components/Menus"
import {userData} from '@/ajax/data'
import {MenusApi} from "@/ajax"; 
import api from '@/ajax/api-sl';
import moment from 'moment';
export default {
    data(){
        return {
            refsTree:null,
            queryParam: {
                title: ''
            },
            editForm:{
                publisher:JSON.parse(sessionStorage.getItem('user')).name,
                publishDate:moment().format('YYYY/MM/DD'),
                timelen:'',
                timetype:1,
                fileName:'',
                creatcontent:''
            },
            viewDialog: {
                isVisible:false,
                title:'新建公司动态详细信息',
                fileName: ''
            },
            tableData:[],
            page:{
              now:1,
              pagesize:10,
              sizes:[2,10, 20, 50, 100],
              total:0,
              key:''
            },
            dialog:{
                isVisible:false,
                title:'新建公司动态详细信息',
                tinymceObj:{
                    height:350,
                    value:''
                },
                treeview:{
                    kind:'user',
                    checkbox:true,
                    data:userData,
                    choose:[1,2,3,4,5,6,7,8],
                    expanded:[],
                    defaultExpandAll: true,
                    props:{
                        children: 'children',
                        label: 'name',
                    }
                }
            },
            select:{
                timeType:[
                    {label:"小时",value:1},
                    {label:"天",value:24}
                ]
            }
        }
    },
    components:{
      tinymce,
      Menus
    },
    mounted(){
        this.html = sessionStorage.getItem('companyProfile');
        this.search()
    },
    methods:{
        async search(){
            let res = await api.getCompanyInformList()
            if (res.code === '00000') {
                this.tableData = res.data.data
            } else {
                this.$message.error(res.message)
            }
        },
        choosetree(a,b){
            this.refsTree = b;
        },
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
              if (valid) {
                let formData = {}
                formData.publisher = this.editForm.publisher;
                formData.publishDate = this.editForm.publishDate;
                formData.fileName = this.editForm.fileName;
                formData.fileContent = this.$refs.editor.myValue;
                formData.expiryHours = this.editForm.timelen * this.editForm.timetype
                formData.isCanceled = false
                formData.orgId = 1
                let res = await api.editCompanyInform(formData)
                if (res.code === '00000') {
                  this.$message.success(this.editForm.informId ? '修改成功' : '添加成功')
                  this.search()
                  this.dialog.isVisible = false
                } else {
                  this.$message.error(res.message)
                }
              } else {
                return false;
              }
            });
        },
        view(row) {
            this.viewDialog.isVisible = true
            this.viewDialog.fileName = row.fileName
            this.viewDialog.fileContent = row.fileContent
        },
        edit(row) {
            this.dialog.isVisible = true
            this.editForm.publisher = row.publisher
            this.editForm.publishDate = row.publishDate
            this.editForm.fileName = row.fileName
            this.editForm.fileContent = row.fileContent
            this.editForm.expiryHours = row.expiryHours
        },
        //分页
        handleSizeChange(pagesize){
            this.page.pagesize = pagesize;
            this.search(true,true);
        },
        handleCurrentChange(pageno){
            this.page.now = pageno;
            this.search(true,true);
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }

    }
}
</script>
<style lang="scss" scoped>
$Color:#15428F;
$Bgnavtab:rgba(255,255,255,.5);
$BgHeader:#DFE8F6;
$BorderColor:#99bbe8;
.common-navstyle{
  color: $Color;font-weight: bold;line-height: 30px;border-radius: 3px;padding: 0 8px; background: linear-gradient(to bottom ,#fff,#deecfd,#fff); background-color:$Bgnavtab;
}
</style>